<template>
  <div class="meter-quality-wrap">
    <Dropdown trigger="click" placement="bottom-start" @on-click="handleChangeFunc">
      <Button type="primary" size="small" :disabled="!showBtn">
        表质量检查
        <Icon type="ios-arrow-down"></Icon>
      </Button>
      <DropdownMenu slot="list">
        <DropdownItem v-for="item in showList" :name="item.value" :key="item.value">{{ item.label }}</DropdownItem>
      </DropdownMenu>
    </Dropdown>
    <!-- 数据缺失 -->
    <Modal
      v-model="sjqsVisible"
      title="数据缺失"
      width="50%"
      :styles="{ top: '30px', height: '85%' }"
      @on-cancel="handleSjqsModalCanel"
    >
      <h-pie3d :id="id()" :chartData="sjqsData" :defaultOptions="hPie3dOptions" />
      <div slot="footer">
        <Button type="primary" @click="handleSjqsModalCanel">确认</Button>
      </div>
    </Modal>
    <!-- 读数异常 -->
    <Modal
      v-model="dsycVisible"
      title="读数异常"
      width="50%"
      :styles="{ top: '30px', height: '85%' }"
      @on-cancel="handleDsycModalCanel"
    >
      <h-pie3d :id="id()" :chartData="dsycData" :defaultOptions="hPie3dOptions" />
      <div slot="footer">
        <Button type="primary" @click="handleDsycModalCanel">确认</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { nanoid } from 'nanoid'
import { createNamespacedHelpers } from 'vuex'
import { each, merge } from 'lodash'
import { hPie3dOptions } from './chartOptions'
import { mainMixins } from '../mixins'

const { mapState, mapActions } = createNamespacedHelpers('historyVerify')

export default {
  name: 'history-verify-meter-quality',
  mixins: [mainMixins],
  components: {
    HPie3d: () => import('@/commons/charts/HPie3d')
  },
  data() {
    return {
      funcToolList: {
        dsyc: this.handleDsycClick,
        sjqs: this.handleSjqsClick
      },
      dsycList: [],
      dsycVisible: false,
      sjqsList: [],
      sjqsVisible: false
    }
  },
  computed: {
    ...mapState(['qcycstForm']),
    toolList() {
      return [
        {
          label: '数据缺失',
          value: 'sjqs',
          active: true
        },
        {
          label: '读数异常',
          value: 'dsyc',
          active: true
        }
      ]
    },
    id() {
      return nanoid
    },
    hPie3dOptions() {
      return hPie3dOptions
    },
    dsycData() {
      const _serList = []
      each(this.dsycList, item => {
        const { name, value } = item
        _serList.push({
          name: name,
          y: value
        })
      })
      return merge({}, hPie3dOptions, {
        series: [
          {
            size: '100%',
            center: ['45%', '45%'],
            data: _serList,
            visible: _serList.length > 0
          }
        ]
      })
    },
    sjqsData() {
      const _serList = []
      each(this.sjqsList, item => {
        const { name, value } = item
        _serList.push({
          name: name,
          y: value
        })
      })
      return merge({}, hPie3dOptions, {
        series: [
          {
            size: '100%',
            center: ['45%', '45%'],
            data: _serList,
            visible: _serList.length > 0
          }
        ]
      })
    }
  },
  methods: {
    ...mapActions(['loadDsycData', 'loadSjqsData']),
    async handleDsycClick() {
      let _obj = {}
      const { min, max } = this.qcycstForm
      if (min !== max) {
        _obj = {
          maxUsageAll: max,
          minUsageAll: min
        }
      }
      const { code, date } = await this.loadDsycData({
        ..._obj
      })
      if (code === 200) {
        this.dsycList = date.list
        this.dsycVisible = true
      }
    },
    handleDsycModalCanel() {
      this.dsycVisible = false
      this.dsycList = []
    },
    async handleSjqsClick() {
      const { code, date } = await this.loadSjqsData()
      if (code === 200) {
        this.sjqsList = date.list
        this.sjqsVisible = true
      }
    },
    handleSjqsModalCanel() {
      this.sjqsVisible = false
      this.sjqsList = []
    }
  }
}
</script>
<style lang="less" scoped></style>
